<template>
  <div class="avatar-container">
    <img 
      :src="imageUrl" 
      :alt="altText" 
      :style="avatarStyle"
      class="avatar-image"
      @click="$emit('click')"
    />
    <img v-if="frameUrl != '0'"
      :src="frameUrl"
      :style="frameStyle"
      class="avatar-frame"
    />
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { userManager } from '@/utils/user'
import { getFrame } from '@/utils/eventBus'
import { userServie } from '@/services/user_service'
// 默认头像SVG (Base64编码)
const DEFAULT_AVATAR = ''
const DEFAULT_FRAME = '../assets/frame/1.png'

const frameUrl=getFrame()
if(userManager.getUserInfo()!=null)
{
   //userManager.setUserFrameUrl()

   userServie.getFrameItemId(userManager.getUserId(),(res)=>{
    if(res.code==1000){
       userManager.setUserFrameUrl(res.msg)
    }
   })


}

const props = defineProps({
  // 头像尺寸（直径）
  size: {
    type: Number,
    default: 40,
    validator: (value) => value > 0
  },
  // 替代文本
  altText: {
    type: String,
    default: '用户头像'
  },
  // 图片填充方式
  fit: {
    type: String,
    default: 'cover',
    validator: (value) => ['cover', 'contain', 'fill', 'none', 'scale-down'].includes(value)
  },
  // 边框样式
  border: {
    type: String,
    default: 'none'
  },
  // 阴影样式
  shadow: {
    type: String,
    default: 'none'
  },
  // 是否使用当前用户头像
  useCurrentUser: {
    type: Boolean,
    default: true
  },
  // 自定义头像URL（当useCurrentUser为false时使用）
  customUrl: {
    type: String,
    default: ''
  },
  // 头像框URL
  frameUrl: {
    type: String,
    default: DEFAULT_FRAME
  },
  // 头像框尺寸（相对于头像的比例）
  frameScale: {
    type: Number,
    default: 1.2
  },
  // 是否禁用悬停效果
  disableHover: {
    type: Boolean,
    default: false
  }
})
const emit = defineEmits(['click'])

// 计算头像URL
const imageUrl = computed(() => {
  if (!props.useCurrentUser) {
    return props.customUrl || DEFAULT_AVATAR
  }
  return userManager.getUserImage() || props.customUrl || DEFAULT_AVATAR
})

// 计算头像样式
const avatarStyle = computed(() => ({
  width: `${props.size}px`,
  height: `${props.size}px`,
  objectFit: props.fit,
  border: props.border,
  boxShadow: props.shadow,
  cursor: props.disableHover ? 'default' : 'pointer',
  position: 'relative',
  zIndex: 1
}))

// 计算头像框样式
const frameStyle = computed(() => ({
  width: `${props.size * props.frameScale*1.20}px`,
  height: `${props.size * props.frameScale*1.20}px`,
  position: 'absolute',
  left: '50%',
  top: '50%',
  transform: 'translate(-50%, -50%)',
  zIndex: 2,
  pointerEvents: 'none' // 使头像框不拦截点击事件
}))
</script>

<style scoped>
.avatar-container {
  position: relative;
  display: inline-block;
}

.avatar-image {
  border-radius: 50%;
  display: block;
  transition: 
    transform 0.2s ease-out,
    opacity 0.2s ease-out,
    box-shadow 0.2s ease-out;
  background-color: #f5f5f5;
}

.avatar-image:not(.no-hover):hover {
  transform: scale(1.05);
  opacity: 0.9;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.avatar-image.no-hover {
  transform: none;
  opacity: 1;
  box-shadow: none;
}
</style>